import {designPage, reactive} from "@peryl/react-compose";
import {PageCard, PageCardContent} from "plain-design";
import {DragDemo} from "./DragDemo";
import {ChatBox} from "./ChatBox";
import {ReactChatBox} from "./ReactChatBox";

export default designPage(() => {

  const state = reactive({
    userContent: '' as string | undefined,
  });

  return () => (
    <PageCard>
      {/*<PageCardContent>
        <ChatBox v-model={state.userContent} disabled/>
        <ChatBox v-model={state.userContent} loading status="error"/>
        <ChatBox modelValue={state.userContent} onUpdateModelValue={val => state.userContent = val}/>
      </PageCardContent>
      <PageCardContent>
        {state.userContent}
      </PageCardContent>
      <PageCardContent>
        <DragDemo/>
      </PageCardContent>*/}
      <ReactChatBox
        handleReceive={({ chunkText }) => {console.log('chunk-->>', chunkText);}}
        handleMessage={({ message }) => {console.log('finish-->>', message);}}
      />
    </PageCard>
  );
});
